<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
	</head>
	<body>

		<style>
			body{
				margin: 0px;
				padding: 0px;
			}

			.form-outer{
				background: lightgrey;
				width: 100%;
				height: 100vh;
			}

			#conversational-form{
				width: 50vw;
				left: auto;
				right: 0px;
			}
		</style>

		<div id="context" class="form-outer" cf-context>

			<form id="form" cf-form>

				 <!-- <fieldset >
					<input cf-label="AI" type="radio" cf-image="https://cdn.space10.io/media/1134/1.png" name="mix-test" tabindex="1" value="0">
					<input cf-label="Meatball" type="radio" cf-image="https://cdn.space10.io/media/1119/labs-2-1.jpg" name="mix-test" tabindex="2" value="1">
					<input cf-label="Nope" type="radio" name="mix-test" tabindex="2" value="none">
				</fieldset>  -->

				<fieldset id="test-value" cf-questions="Ready to try a conditional flow?">
					<label for="intro-yes">Yes
						<input type="radio" name="cfc-intro" id="intro-yes" value="yes">
					</label>

					<input type="radio" name="cfc-intro" id="intro-no" value="no">
					<label for="intro-no">No thanks</label>

					<input type="radio" disabled name="cfc-intro" id="intro-disabled" value="ignore">
					<label for="intro-disabled">Disabled..</label>
				</fieldset>

				<input
					type="text"
					id="gr8"
					name="cfc-step1"
					cf-questions="{test-value}! Let's goo! please write, <strong>gr8</strong> to continue, if you write something else than <strong>gr8</strong> the will you will skip elements."
					cf-conditional-cfc-intro="yes" />

				<fieldset cf-questions="<strong>{gr8}!</strong> Please choose a path.">
					<input required type="radio" name="cfc-path" id="path-a" value="a" cf-conditional-cfc-step1="^gr8$||great">
					<label for="path-a">Path A</label>

					<input required type="radio" name="cfc-path" id="path-b" value="b" cf-conditional-cfc-step1="^gr8$||great">
					<label for="path-b">Path B (checkboxes and radiobuttons)</label>

					<input required type="radio" name="cfc-path" id="path-d" value="d" cf-conditional-cfc-step1="^gr8$||great">
					<label for="path-d">Path D (C is ignored)</label>
				</fieldset>

				<!--Path A-->
				<input
					id="path-a-1"
					type="text"
					cf-questions="Path A question 1/1, try and change your previous choice to B"
					cf-conditional-cfc-path="a"
				/>

				<!--Path B-->
				<fieldset
					cf-questions="Path B question 1/2, multi choice"
				>
					<input 
						required
						type="checkbox"
						cf-conditional-cfc-path="b"
						name="cfc-path-b-checkbox"
						id="path-b-checkbox-1"
						value="test1"
					>
					<label for="path-b-checkbox-1">Path B, checkbox 1</label>

					<input 
						required
						type="checkbox"
						cf-conditional-cfc-path="b"
						name="cfc-path-b-checkbox"
						id="path-b-checkbox-2"
						value="test2"
						checked="checked"
					>
					<label for="path-b-checkbox-2">Path B, checkbox 2</label>
				</fieldset>


				<!-- if both checkboxes are checked-->
				<!-- also path b -->
				<!-- two different conditions !-->
				<input
					id="path-b-alternative"
					type="text"
					cf-questions="Both checkboxes checked and path 'b' was choosen, hurray \o/"
					cf-conditional-cfc-path="b"
					cf-conditional-cfc-path-b-checkbox="test1,test2"
				/>

				<fieldset
					cf-questions="Path B question 2/2, radio buttons, <strong>hint:</strong> choose one to continue"
				>
					<input 
						required
						type="radio"
						cf-conditional-cfc-path="b"
						name="cfc-path-b-radio"
						id="path-b-radio-1"
						value="test1"
					>
					<label for="path-b-radio-1">Path radio 1</label>

					<input 
						required
						type="radio"
						cf-conditional-cfc-path="b"
						name="cfc-path-b-radio"
						id="path-b-radio-2"
						value="test2"
						checked="checked"
					>
					<label for="path-b-radio-2">Path radio 2</label>
				</fieldset>

				<!--Path C-->
				<input
					type="text"
					cf-questions="Path C question 1/1, I will be completly ignored as there is no C Path."
					cf-conditional-cfc-path="c"
				/>

				<!--Path D, section > option-->
				<select
					cf-questions="Path D question 1/1, Pick an option."
					cf-conditional-cfc-path="d"
					name="path-d-option"
				>
					<option value="option-a" selected>Path D 2/2 #1</option>
					<option value="option-b">Path D 2/2 #2</option>
				</select>

				<input
					type="text"
					cf-questions="Path D question 2/2/1"
					cf-conditional-path-d-option="option-a"
				/>

				<input
					type="text"
					cf-questions="Path D question 2/2/22"
					cf-conditional-path-d-option="option-b"
				/>

				<!-- standard flow, no confitionals -->
				<input
					id="nope"
					type="text"
					cf-questions="You decided not to continue on the conditional adventure, Zelda is sad."
					cf-conditional-cfc-intro="no" />

				<fieldset 
					cf-questions="I am apart of standard flow, a natural part of the flow. No conditionals involved here."
				>
					<input required type="radio" name="standard-radios" id="standard-yes" value="a">
					<label for="standard-yes">Standard radio 1</label>

					<input required type="radio" name="standard-radios" id="standard-no" value="b">
					<label for="standard-no">Standard radio 2</label>
				</fieldset>

				<input
					id="outsider"
					type="text"
					cf-questions="Lst step of the flow (not a conditional step)"
					/>
			</form>
		</div>






		<!-- <script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script> -->

























  <script
  type="text/javascript"
  src="../build/bower_components/promise-polyfill/promise.js"
></script>

<script
  type="text/javascript"
  src="../build/bower_components/custom-event-polyfill/custom-event-polyfill.js"
></script>

<script
  id="conversational-form-development" 
  type="text/javascript"
  src="../build/cf/ConversationalForm.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/parsing/TagsParser.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/ConversationalForm.plugin.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/logic/Helpers.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/logic/EventDispatcher.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/interfaces/IUserInterfaceOptions.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/ui/BasicElement.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/ui/control-elements/ControlElement.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/ui/control-elements/ControlElements.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/ui/ScrollController.js"
></script>

<script 
  type="text/javascript"
  src="../build/cf/data/Dictionary.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/form-tags/Tag.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/form-tags/TagGroup.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/form-tags/InputTag.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/form-tags/SelectTag.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/form-tags/ButtonTag.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/form-tags/OptionTag.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/ui/control-elements/Button.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/ui/control-elements/RadioButton.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/ui/control-elements/CheckboxButton.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/ui/control-elements/OptionButton.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/ui/control-elements/OptionsList.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/ui/control-elements/UploadFileUI.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/interfaces/IUserInput.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/interfaces/IUserInputElement.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/ui/inputs/UserInputElement.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/ui/inputs/UserTextInput.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/logic/MicrophoneBridge.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/ui/inputs/UserInputSubmitButton.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/ui/chat/ChatResponse.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/ui/chat/ChatList.js"
></script>

<script
  type="text/javascript"
  src="../build/cf/logic/FlowManager.js"
></script>

<link type="text/css" rel="stylesheet" href="../build/conversational-form.css"/>

		<!-- OR -->
		<!--<script type="text/javascript" id="conversational-form-development" src="../dist/conversational-form.min.js" crossorigin></script>-->

	</body>
</html>
